<template>
  <div>
    <etable ref="eTable" v-show="currentState === 'normal'" :columns="columns" @btnClick="handClick" easySearchPlaceholder="名称或name" :tools="['easySearch','refresh']">
      <div slot="buttons">
        <Button type="primary" @click="add">新增</Button>
      </div>
    </etable>
    <menusaveupdate ref="su" @showTable="init"></menusaveupdate>
  </div>
</template>

<script>
import etable from '@/components/easy-table/easy-table.vue'
import menusaveupdate from './menu-save-update'
import { deleteMenu } from '../../../api/sys/menu'

export default {
  name: 'manager',
  components: {
    etable,
    menusaveupdate
  },
  data () {
    return {
      currentState: 'normal',
      url: 'sys/menu/list?',
      columns: [
        { title: '图标',
          width: 100,
          key: 'icon',
          align: 'center',
          render: (h, params) => {
            return h('CommonIcon', {
              props: {
                type: params.row.icon,
                size: 18
              }
            })
          } },
        { title: '名称', width: 160, key: 'title', align: 'center' },
        {
          title: '父级',
          key: 'parentName',
          align: 'center',
          width: 160,
          render: (h, params) => {
            return h('span', params.row.parentId === 0 ? '顶级目录' : params.row.parentName)
          }
        },
        { title: 'name', minWidth: 100, key: 'name', align: 'center' },
        { title: 'path', minWidth: 160, key: 'path', align: 'center' },
        { title: '系统级',
          width: 100,
          key: 'isSystem',
          align: 'center',
          render: (h, params) => {
            return h('span', params.row.isSystem ? '是' : '否')
          } },
        { title: '面包屑',
          width: 100,
          key: 'hideInBread',
          align: 'center',
          render: (h, params) => {
            return h('span', params.row.hideInBread ? '隐藏' : '显示')
          } },
        { title: '菜单栏',
          width: 100,
          key: 'hideInMenu',
          align: 'center',
          render: (h, params) => {
            return h('span', params.row.hideInMenu ? '隐藏' : '显示')
          } },
        { title: '总是显示',
          width: 100,
          key: 'showAlways',
          align: 'center',
          render: (h, params) => {
            return h('span', params.row.showAlways ? '是' : '否')
          } },
        { title: '操作',
          width: 150,
          key: 'handle',
          align: 'center',
          options: [ 'edit', 'delete' ] }
      ]
    }
  },
  methods: {
    add () {
      this.$refs['su'].showAdd()
    },
    handClick (name, param) {
      if (name === 'edit') {
        this.$refs['su'].showEdit(param.row.id)
      } else if (name === 'delete') {
        deleteMenu(param.row.id).then(res => {
          if (res.code === 200) {
            this.$Message.success('删除成功')
            this.init()
          }
        })
      }
    },
    init () {
      this.$refs['eTable'].init(this.url)
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>

</style>
